window.onload = function(){
    var show = document.querySelector('.show');
    var mask = document.querySelector('.mask');
    var bigs = document.querySelector('#bigs');

    show.addEventListener('mousemove',function(e){
        var x = e.pageX - this.offsetLeft-280;
        var y = e.pageY - this.offsetTop -200;
        console.log(x,y);
        var maskX =  x - mask.offsetWidth/2;
        var maskY =  y - mask.offsetHeight/2;

        if(maskX <= 0){
            maskX = 0;
        }else if(maskX >= show.offsetWidth - mask.offsetWidth){
            maskX = show.offsetWidth - mask.offsetWidth;
        }


        if(maskY <= 0 ){
            maskY = 0;
        }else if(maskY >= show.offsetHeight - mask.offsetHeight){
            maskY = show.offsetHeight - mask.offsetHeight;
        }

        mask.style.left = maskX +'px';
        mask.style.top = maskY +'px';
        console.log(maskX,maskY);

        var bigX = 2 * maskX;
        var bigY = 2 * maskY;

        bigs.style.left = -bigX + 'px';
        bigs.style.top = -bigY + 'px';
    })
    show.addEventListener('mouseout',function(){
        // bigs.style.display = 'none';
    })
}